import React, { Component,} from 'react';
import { connect } from 'dva';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, } from 'antd';
import PropTypes from 'prop-types';
import BasicInfo from './tbas/basicInfo';
import SalesInfo from './tbas/salesInfo';
import { routerRedux } from 'dva/router';
@connect((state: any) => ({
  menu: state.menu,
  goodAdd: state.goodAdd,
}))
export default class  Page extends Component<any, any> {
  static contextTypes = {
    dicData: PropTypes.any,
  };

   state = {
     current:'1',
     attributeList:[],
    };
   basicRef = React.createRef();
   saleRef = React.createRef();
  componentDidMount() {

    }
  goBack =()=>{
    sessionStorage.removeItem('goodBasicInfo');
    sessionStorage.removeItem('goodsaleInfo');
    const { dispatch } = this.props;
        dispatch(routerRedux.push({ pathname: '/goodsManager/goodsMng', sourcePage: 'goodsMng' }));
  }
  //下一步
  nextStep=()=>{
    const {current}=this.state;
    let oldNum = Number(current);
    let newNum = oldNum + 1;
    const num = newNum.toString();
    this.setState({
        current: num,
    })
  }
  //上一步
  preStep=()=>{
    const {current}=this.state;
    let oldNum = Number(current);
    let newNum = oldNum - 1;
    const num = newNum.toString();
    this.setState({
        current: num,
    })
  }
  getattributeList = (obj:any)=>{
    this.setState({
      attributeList: obj
    })
  }
  render() {
    const allTabs = [
        {
          tab: '基础信息',
          key: '1',
          component: () =><BasicInfo nextStep={this.nextStep}   onRef={(basicRef:any) => (this.basicRef = basicRef)} getattributeList={this.getattributeList}/>,
          show: true,
        },
        {
          tab: '销售信息',
          key: '2',
          component: () => <SalesInfo preStep={this.preStep} onRef={(saleRef:any) => (this.saleRef = saleRef)} attributeList={this.state.attributeList}/>,
          show: true,
        },
    ];
  const {current}=this.state;
  const tabs = allTabs.filter(tab => tab.show);
  const currentTab = tabs.length ? (tabs.find(e => e.key === current)?.component()) : null;
    return (
        <Card  activeTabKey={current} tabList={tabs} title={'创建商品'}>
          <div>
             <div style={{float:'right', marginTop:'-100px'}}>
               <Button  type="primary" onClick={()=>{this.goBack()}}>返回</Button>
             </div>
             {currentTab}
        </div>
      </Card>
    );
  }
}

